Three.js是一个基于WebGL的JavaScript 3D库，它提供了丰富的API来简化在浏览器中创建和渲染3D图形的过程。下面我们将简单介绍一些Three.js的API，并提供一个有趣的例子来展示它的用法。

Three.js API介绍
Scene（场景）：表示整个3D场景的容器，用于存放所有的3D对象，光源和相机等。
Camera（相机）：决定了观察者的视角，包括透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）两种类型。
Renderer（渲染器）：用于渲染3D场景，将3D场景绘制到2D画布上，提供了WebGLRenderer作为主要的渲染器。
Geometry（几何体）：描述3D对象的形状和结构，包括点（Point）、线（Line）、面（Face）等。
Material（材质）：决定了3D对象的外观，包括颜色、纹理、光照效果等。
Mesh（网格）：将几何体和材质结合起来，用于创建最终的3D对象。
Light（光源）：用于提供光照效果，包括环境光（AmbientLight）、平行光（DirectionalLight）、点光源（PointLight）等。
有趣的例子：创建一个旋转的立方体 下面是一个简单的例子，展示了如何使用Three.js创建一个旋转的立方体，并在浏览器中显示出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Three.js Example</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    // 创建场景
    var scene = new THREE.Scene();

    // 创建相机
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建立方体
    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 渲染场景
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>

在这个例子中，我们创建了一个场景、相机、渲染器和一个立方体，并且设置了动画函数来使立方体旋转。最终，我们将渲染出来的3D场景显示在浏览器中。这个例子展示了使用Three.js创建简单的3D图形场景的过程，希望你能通过这个例子了解到一些基本的Three.js API用法。